<template>
    <div :class="parentClass">
        <el-form :model="formData" :disabled='isdisabled' :inline="true" :rules="rules">
                    <el-form-item v-for="item in formList" :key="item.label" :label="item.label" :prop="item.prop">
                    <el-input :placeholder="item.disabled ? '': '请输入'" :disabled="item.disabled" v-if="item.input" class="inputt" v-model= 'formData[item.prop]'></el-input>
                      <template v-else-if="item.btn" >
                        <el-button type="text" @click="clickBtn" :disabled="item.disabled" >{{item.value}}</el-button>
                    </template>
                    <template v-else-if="item.btninput">
                        <span style="margin-left:-30px;margin-right:45px">{{formData[item.prop]}}</span>
                        <el-button type="text" @click="clickInput">{{item.value}}</el-button>
                    </template>
                    <el-select @change="selectChange" :disabled="item.disabled" placeholder="请选择" style="width:100%" v-else-if="item.select" v-model="formData[item.prop]" >
                        <el-option  v-for="option in item.options" :key = "option.label" :label="option.label" :value="option.value"></el-option>
                    </el-select>
                    <el-date-picker  v-else-if="item.date"
                        style="width:100%"
                        v-model="formData[item.prop]"
                        type="date"
                        :disabled="item.disabled"
                        @change="changeInput"
                        placeholder="选择日期">
                    </el-date-picker>
                    <div style="display:flex" v-else-if='item.inputsel'>
                        <el-input v-model='formData[item.prop]' @input="changeInput" placeholder='请输入'></el-input>
                        <el-select style="border-left:1px solid #efefef"  v-model="formData[item.prop2]" >
                             <el-option  v-for="option in item.options" :key = "option.label" :label="option.label" :value="option.value"></el-option>
                        </el-select>
                    </div>
                    <div v-else>{{formData[item.prop]}}</div>
                </el-form-item>
            </el-form>
    </div>
</template>
<script>
export default {
    name: 'formList',
    data() {
        return {
                rules:{
                    TransScope: [
                        { required: true, message: '请输入账号', trigger: 'blur' }
                    ]
                },
        }
    },
    props:{
        formList: Array,
        formData: Object,
        parentClass: String,
        isdisabled: Boolean
    },
    mounted(){
    

    },
    methods:{
       selectChange(val) {

           let len = this.formList.length
          
           if(val == '卖出') {
     
          this.formList[len-1].disabled = false
             this.formList[2].disabled = true
            } else if(val == '买入'){
                this.formList[len-1].disabled = true
                this.formList[2].disabled = false
      }
           this.$emit('selectChange', val)
       },
       clickBtn() {
           this.$emit('goMzmx', 'dd')
       },
       changeInput(val) {
           this.$emit('jsDate', val)
       },
       clickInput() {
           this.$emit('clickInput')
       }
    }
}
</script>
<style lang="scss">
.formll{
     .el-form-item{
        width:49%;
        margin:0;
        border: 1px solid white;
        .el-form-item__label, .el-form-item__content{
            padding: 6px 2px;
            border-right: 1px solid white;
        }
        .el-form-item__label{
          text-align: center;
            width:45%;
            box-sizing: border-box;
            background: #2f3638;
            color:white;
        }
        .el-form-item__content{
          width:55%;
          text-align: center;
          box-sizing: border-box;
          background: rgba(53,58,58,0.55);
        //   opacity: 0.8;
        .el-select .el-input .el-select__caret{
            color:white;
        }
          .el-input__inner{
              background: transparent;
              color: white;
              border: 0;
              div{
                  color: white!important
              }
          }
        }
      }
}
.addOppo{
    .el-form-item{
        width:90%;
        margin:0;
        border: 1px solid white;
        .el-form-item__label, .el-form-item__content{
            padding: 6px 2px;
            border-right: 1px solid white;
        }
        .el-form-item__label{
          text-align: center;
            width:45%;
            background: #2f3638;
            color:white;
        }
        .el-form-item__content{
          width:54.2%;
          text-align: center;
          background: rgba(53, 58, 58, 0.55);
        //   opacity: 0.8;
        .el-select .el-input .el-select__caret{
            color:white;
        }
          .el-input__inner{
              background: transparent;
              color: white;
              border: 0;
              div{
                  color: white!important
              }
          }
        }
      }
}
// .formClass{
//     .el-form-item{
//         width: 40%;
//         margin-right: 0;
//         margin-bottom:4px;
//         .el-form-item__label{
//             width:22.5%;
//             background: #f0f0f0
//         }
//         .el-form-item__content{
//             width: 77.5%
//         }
//     }
//     .el-form-item:nth-child(9){
//         width:90%;
//         margin-right: 0;
//         margin-bottom:4px;
//         .el-form-item__label{
//             width:10%;
//             background: #f0f0f0
//         }
//         .el-form-item__content{
//             width: 90%
//         }
//     }
// }





</style>
